<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">
		<div style="background: #F6F6F6;margin-bottom: 10px;border-radius: 4px;;">
			<el-row :gutter="20">
				<el-col :span="11">
					<div style="background: #fff;padding:15px 20px;border-radius: 8px;box-shadow: 0px 4px 12px 0px #E6E6E6;">
						<div class="displayFlex">
							<div class="displayFlex">
								<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd"
									value-format="yyyy-MM-dd" type="date" size="small" class="w130px" @change="search()">
								</el-date-picker>
								<img src="@/assets/sIcon83.png" style="width: 20px;height: 5px;" class="ml10 mr10" />
								<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd"
									value-format="yyyy-MM-dd" type="date" size="small" class="ml10 w130px" @change="search()">
								</el-date-picker>
							</div>
							<el-input v-model="params.vehicleNo" placeholder="车牌号" style="width:140px" class="ml10" @change="search()" />

							<el-select size="small" style="width:140px" class="input-width ml10" clearable
								v-model="params.emissionStandard" placeholder="排放标准" @change="search()">
								<el-option label="国三" value="NATIONAL_STANDARD_3"> </el-option>
								<el-option label="国四" value="NATIONAL_STANDARD_4"> </el-option>
								<el-option label="国五" value="NATIONAL_STANDARD_5"> </el-option>
								<el-option label="国六" value="NATIONAL_STANDARD_6"> </el-option>
							</el-select>
						</div>

						<div style="margin-top: 15px;color: #fff;background: #2B04C3;border-radius: 16px;padding:22px 40px;"
							class="displayFlexBet">
							<div class="displayFlex">
								<div>
									<img src="@/assets/sIcon99.png" style="width:60px;height: 60px;" />
								</div>
								<div class="ml10">
									<div style="font-size:22px;margin-bottom: 15px;">{{inAndOut.in}}</div>
									<div style="color: #37BEF0;">本时期进场车次</div>
								</div>
							</div>

							<div class="displayFlex">
								<div>
									<img src="@/assets/sIcon98.png" style="width:60px;height: 60px;" />
								</div>
								<div class="ml10">
									<div style="font-size:22px;margin-bottom: 15px;">{{inAndOut.out}}</div>
									<div style="color: #37BEF0;">本时期出场车次</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>

				<el-col :span="13">
					<div class="displayFlexBet">
						<div class="u-border u-borderRadius8 text-center mr10 bgfff displayFlex"
							style="flex: 1;height: 186px;justify-content: center;align-items: flex-start;padding-top: 30px;">
							<div class="mr20">
								<el-progress type="circle" :percentage="dataList1.percent" :format="()=>{
											return '进'
										}" color="#3A3EF4" :width="100" :stroke-width="8"></el-progress>
								<div class="color888 mt10">本时期进场</div>
							</div>

							<div>
								<div v-for="(item,index) in dataList1.list" :key="index" class="displayFlexBet mb15">
									<div class="displayFlex">
										<div style="width: 8px;height: 8px;border-radius: 50%;" class="mr10"
											:style="{'background':colors[index]}"></div>
										<span class="ml-5 color888">{{item.name}}</span>
									</div>
									<div style="margin-left: 50px;" class="color333">{{item.num}}</div>
								</div>
							</div>
						</div>

						<div class="u-border u-borderRadius8 text-center bgfff displayFlex"
							style="flex: 1;height: 186px;justify-content: center;align-items: flex-start;padding-top: 30px;">
							<div class="mr20">
								<el-progress type="circle" :percentage="dataList2.percent" :format="()=>{
											return '出'
										}" color="#3A3EF4" :width="100" :stroke-width="8"></el-progress>
								<div class="color888 mt10">本时期出场</div>
							</div>

							<div>
								<div v-for="(item,index) in dataList2.list" :key="index" class="displayFlexBet mb15">
									<div class="displayFlex">
										<div style="width: 8px;height: 8px;border-radius: 50%;" class="mr10"
											:style="{'background':colors[index]}"></div>
										<span class="ml-5 color888">{{item.name}}</span>
									</div>
									<div style="margin-left: 50px;" class="color333">{{item.num}}</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<div style="margin-top: 10px;">
			<div class="displayFlexBet bgfff bra8 font15 color555" style="padding: 10px 20px;">
				<div style="width: 40px;">编号</div>
				<div style="width: 200px;">时间</div>
				<div style="width: 150px;">进场/出场</div>
				<div style="width: 250px;">车牌</div>
				<div style="width: 150px;">排放标准</div>
			</div>
			<div class="bgfff bra8 font15 color555 mt10" style="padding: 10px 20px;">
				<el-empty v-if="tableData.list.length == 0" style="margin: 0 auto;" />
				<div v-for="(item,index) in tableData.list" :key="index" class="displayFlexBet color555 point"
					@click="$router.push('/cleanTransportation/detail?id='+item.id)">
					<div style="width: 40px;border-bottom: 1px solid#F8F7F9;padding-bottom: 10px;padding-top: 10px;">
						{{item.receiptNo}}
					</div>
					<div style="width: 200px;">{{item.transportTime}}</div>
					<div style="width: 150px;">{{item.transportTypeStr}}</div>
					<div style="width: 250px;">{{item.vehicleNo}}</div>
					<div style="width: 150px;">{{item.emissionStandardStr}}</div>
				</div>
			</div>

			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';


	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					startTime: moment().startOf('month').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					vehicleNo: '',
					emissionStandard: '',
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				dataList1: {
					percent: 0,
					list: []
				},
				dataList2: {
					percent: 0,
					list: []
				},
				inAndOut: {},
				colors: ['#4A30E0', '#21D189', '#0078E8', '#F04859']
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token



			that.getTableData()
		},
		methods: {

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			getTableData() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.transportType = "in"
				that.ajax({
					url: 'cleanTransportation/countDoorEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(data) {
						if (data.status == 1) {
							let seriersData = []
							that.dataList1 = data.data
							// for (let item of data.data.list) {
							// 	let _item = {
							// 		value: item.num,
							// 		name: item.name
							// 	}
							// 	seriersData.push(_item)
							// }
							// that.formChart("chart1", seriersData, "入库")
							//that.inAndOut = data.data
						}
					}
				});
				thisParams.transportType = "out"
				that.ajax({
					url: 'cleanTransportation/countDoorEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(data) {
						if (data.status == 1) {
							that.dataList2 = data.data
							// let seriersData = []
							// for (let item of data.data.list) {
							// 	let _item = {
							// 		value: item.num,
							// 		name: item.name
							// 	}
							// 	seriersData.push(_item)
							// }
							// that.formChart("chart2", seriersData, "出库")
							//that.inAndOut = data.data
						}
					}
				});

				that.ajax({
					url: 'cleanTransportation/countInAndOut',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(data) {
						if (data.status == 1) {
							that.inAndOut = data.data
						}
					}
				});

				let apiName = "cleanTransportation/pageCleanTransportation"

				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},


			// formChart(chartId, seriesData, title = "入场") {
			// 	var chartDom = document.getElementById(chartId);
			// 	var myChart = echarts.init(chartDom);
			// 	var option;

			// 	option = {
			// 		// title: {
			// 		// 	text: 'Referer of a Website',
			// 		// 	subtext: 'Fake Data',
			// 		// 	left: 'center'
			// 		// },
			// 		// tooltip: {
			// 		// 	trigger: 'item'
			// 		// },
			// 		legend: {
			// 			orient: 'vertical',
			// 			left: 'left'
			// 		}, 
			// 		series: [{
			// 			name: title,
			// 			type: 'pie',
			// 			radius: '50%',
			// 			data: seriesData,
			// 			emphasis: {
			// 				itemStyle: {
			// 					shadowBlur: 10,
			// 					shadowOffsetX: 0,
			// 					shadowColor: 'rgba(0, 0, 0, 0.5)'
			// 				}
			// 			}
			// 		}]
			// 	};

			// 	option && myChart.setOption(option);
			// },

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>